<template>
  <Card>
    <Api ref="apiRef" :load="page" v-model:input="input" browser>
      <Space direction="vertical">
        <Cond :col="4">
          <CondItem title="关键字" field="keyword">
            <Input v-model="input.params.keyword" placeholder="key/名称/备注" />
          </CondItem>
          <CondItem title="创建人" field="creator">
            <Input v-model="input.params.creator" />
          </CondItem>
          <CondItem title="禁用" field="disabled">
            <Enum v-model="input.params.disabled" clazz="Boolean" />
          </CondItem>
          <CondItem title="创建日期" field="createdAts">
            <DateRangePicker v-model="input.params.createdAts" />
          </CondItem>
          <template #op>
            <Button shape="circle" type="primary" @click="onCreate">
              <IconPlus />
            </Button>
          </template>
        </Cond>
        <Table>
          <TableColumn title="ID" field="id" :width="70" />
          <TableColumn title="名称" field="key" align="left" :minWidth="120">
            <template #cell="{ row }">
              <Popover position="right">
                <Button is-text :text="row.name" />
                <template #content>
                  <Space>
                    <Button @click="onUpdate(row)">编辑</Button>
                    <Button @click="onDelete(row.id)">删除</Button>
                  </Space>
                </template>
              </Popover>
            </template>
          </TableColumn>
          <TableColumn title="键" field="key" align="left" :minWidth="120">
            <template #cell="{ row }">
              <Text :text="row.key" copyable />
            </template>
          </TableColumn>
          <TableColumn title="值" field="value" :minWidth="120" />
          <TableColumn title="前端可用" field="frontend" :width="120" type="Boolean" tip="比如一些密钥，前端接口获取不到这些配置" />
          <TableColumn title="应用" field="appId" :width="100" />
          <TableColumn title="租户" field="tenantId" :width="100" />
          <TableColumn title="组" field="groupId" :width="100" />
          <TableColumn title="创建日期" :width="160" field="createdAt" type="Datetime" sortable />
          <TableColumn title="更新日期" :width="160" field="updatedAt" type="Datetime" sortable />
        </Table>
      </Space>
    </Api>
  </Card>
</template>

<script setup lang="ts">
import { defineAsyncComponent, ref } from 'vue'
import { Button, Card, Cond, CondItem, DateRangePicker, Enum, Input, Modal, Popover, Space, Table, TableColumn } from '@idmy/ui'
import { Api, useDelete } from '@idmy/core'
import { del, page } from './services'
import { IconPlus } from '@idmy/ui-icon'

const Create = defineAsyncComponent(() => import('../create/index.vue'))

const input = ref({
  sorts: ['createdAt', 'desc'],
  params: {
    disabled: false,
    createdAts: [],
  },
})

const apiRef = ref()
const load = () => apiRef.value.onLoad()

const onDelete = useDelete(del, load)

const onCreate = () => Modal.open({ component: Create, title: '创建账户类型', width: 2, enableLock: true })

const onUpdate = model =>
  Modal.open({
    component: Create,
    title: '修改账户类型',
    width: 2,
    props: { model },
    onClose: () => load(),
  })
</script>
